@extends('admin.layouts.base')
@section('content')
    <el-col :span="24">
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="order_id" label="订单号"></el-table-column>
            <el-table-column prop="user_id" label="用户id"></el-table-column>
            <el-table-column prop="order_state" label="订单状态">
                <template slot-scope="scope">
                    @{{getOrderStateCn(scope.row.order_state)}}
                </template>
            </el-table-column>
            <el-table-column prop="time" label="下单时间"></el-table-column>

            <el-table-column prop="totalprice" label="总价(元)"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">

                    <el-button type="text" size="small">
                        <a :href="getDetailUrl(scope.row.order_id)">详情</a>
                    </el-button>
                    <el-button v-if="scope.row.order_state == 2" @click="handleShip(scope.row)" type="text"
                               size="small">
                        发货
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background layout="prev, pager, next" :total="total" @current-change="handlePageChange"
                       :page-size="15"></el-pagination>
    </el-col>
@endsection
@section('scripts')
    <script>
        new Vue({
            el: '#app',
            data: function () {
                return {
                    tableData: [],
                    visible: false,
                    filter: {
                        page: 1,
                    },
                    total: 0,
                    form: {
                        name: '',
                        // region: '',
                        // date1: '',
                        // date2: '',
                        // delivery: false,
                        attrs: [],
                        // resource: '',
                        // desc: ''
                    }
                }
            },
            methods: {
                onSubmit() {
                    axios.post('/goods/store', this.form).then(function (res) {

                    });
                },
                getDetailUrl(id) {
                    let url = '{{route('admin.order.show')}}';
                    return url + '?order_id=' + id;
                },
                addDomain() {
                    this.form.attrs.push({
                        color: '',
                        size: '',
                        num: '',
                        key: Date.now()
                    });
                },
                getLists() {
                    let self = this;
                    axios.post('{{route('admin.order.list')}}', this.filter).then(function (res) {
                        if (res.data.status !== 0) {
                            self.$message('s');
                        } else {

                            self.tableData = res.data.data.data;
                            self.filter.page = res.data.data.current_page;
                            self.total = res.data.data.total;
                        }
                    })
                },
                handlePageChange(e) {
                    this.filter.page = e;
                    this.getLists();
                },
                handleShip(row) {

                    let self = this;
                    axios.post('{{route('admin.order.ship')}}', {
                        order_id: row.order_id
                    }).then(function (res) {
                        if (res.data.status !== 0) {
                            self.$message.error(res.data.msg);
                        } else {
                            self.$message('操作成功');
                            self.getLists();
                        }
                    })
                },
                getOrderStateCn(state) {
                    if (state === 1) {
                        return '待支付';
                    }
                    if (state === 2) {
                        return '待发货';
                    }
                    if (state === 3) {
                        return '待收货';
                    }
                    if (state === 4) {
                        return '已完成';
                    }
                }
            },
            mounted() {
                this.getLists();
            }
        })
    </script>
@endsection
